<!-- 订单申述 -->
<template>
	<view class="content">
		<view class="order-nav">
			<text :class="params.status == 0 ? 'order-act' : ''" @click="statusSwitch(0)">全部</text>
			<text :class="params.status == 3 ? 'order-act' : ''" @click="statusSwitch(3)">待审核</text>
			<text :class="params.status == 1 ? 'order-act' : ''" @click="statusSwitch(1)">已通过</text>
			<text :class="params.status == 2 ? 'order-act' : ''" @click="statusSwitch(2)">已拒绝</text>
		</view>
		<view class="order_list">
			<ul>
				<li v-for="item in order_list" :key="item.id">
					<view class="order_num">订单号：&nbsp;&nbsp; {{item.order_no}}</view>
					<view class="order_cause">
						<view class="key">申述原因：</view>
						<view class="val">{{item.reason}}</view>
					</view>
					<view class="state" style="background-color: #ffefe1;color: #ff8415;" v-if="item.type==3">待审核</view>
					<view class="state" style="background-color: #d9fde1;color: #5fc673;" v-else-if="item.type==1">已通过</view>
					<view class="state" style="background-color: #ffecee;color: #fe635f;" v-else-if="item.type==2">已拒绝</view>
				</li>
			</ul>
		</view>
		<view class="order_state" @click="onStates">
			<image src="/static/03.png" mode="widthFix"></image>
			<view>订单申述</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const request = require('../../utils/request');
	export default {
	    data() {
	        return {
				//获取订单列表参数
				params:{
					status:0, //状态
					page:1, //分页
				},
				//订单列表
				order_list:[],
				//上拉加载状态
				push_status:false,
			}
		},
		onShow() {
			this.order_list = [];
			this.get_order_sslist();
		},
		methods: {
			/**
			 * 状态切换
			 */
			statusSwitch(status){
				var that = this;
				that.params.page = 1;
				that.params.status = status;
				that.order_list = [];
				that.get_order_sslist(); //加载订单列表
			},
			onStates(){
				uni.navigateTo({
					url:'/pages/my/orderStates'
				})
			},
			get_order_sslist(){
				let that = this;
				request(app.globalData.api_url+'/v1/user/order_sslist', 'POST', {
					page:that.params.page,
					type:that.params.status,
				}).then((res) => {
					if(res.data.code == 0){
						that.order_list = that.order_list.concat(res.data.data);
						uni.stopPullDownRefresh();
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
					}
				});
			}
		},
		onPullDownRefresh(){
			//console.log('下拉');
			var that = this;
			that.params.page = 1;
			that.order_list = [];
			that.get_order_sslist(); //加载订单列表
		},
		onReachBottom(){
			//console.log('上拉');
			var that = this;
			that.params.page++;
			that.get_order_sslist(); //加载订单列表
		},
	}
	
</script>

<style scoped lang="scss">
	page{
		background-color: $uni-bg-color-grey;
	}
	.order-nav{
		display: flex;
		background-color: #fff;
		text{
			font-size: 28rpx;
			margin: 0 20rpx;
			height:80rpx;
			line-height:80rpx;
			flex: 1;
			text-align: center;
			&.order-act{
				border-bottom:2px solid $uni-text-color-active;
			}
		}
	}
	.order_list{
		margin: 30rpx 30rpx 0;
		ul{
			li{
				background-color: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				position: relative;
				.order_num{
					font-size: 28rpx;
					color: #333;
					margin-bottom: 20rpx;
				}
				.order_cause{
					display: flex;
					align-items: end;
					.key,.val{
						font-size: 28rpx;
						color: #333;
					}
					.val{
						flex: 1;
					}
				}
				.state{
					width: 120rpx;
					height: 40rpx;
					position: absolute;
					top: 0;
					right: 0;
					background-color: #333;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					font-size: 28rpx;
					line-height: 28rpx;
				}
			}
		}
	}
	.order_state{
		width: 150rpx;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;
		padding: 20rpx 0;
		position: fixed;
		bottom: 180rpx;
		right: 30rpx;
		box-shadow: -1rpx 2rpx 24rpx 0rpx rgba(144,144,144,0.36);
		image{
			width: 108rpx;
			margin-bottom: 4rpx;
		}
		view{
			font-size: 26rpx;
			color: #333;
			font-weight: 600;
			letter-spacing: 2rpx;
		}
	}
</style>